<!--
 * @Autor: dingxiaolin
 * @Date: 2021-01-25 17:17:01
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2021-02-26 13:49:40
-->
<template>
    <div class="fileContainer">
        <div class="title">{{ title }}</div>
        <div class="filelist">
            <div v-for="(v, i) in value" :key="i" class="item" @click="downFile(v.path)">
                <i class="iconfont iconfujian"></i>
                <p :title="v.name">{{ v.name }}</p>
                <i class="iconfont iconshanchu1 del" @click.stop="delFile(i)" v-if="upload"></i>
            </div>
            <div v-if="upload">
                <el-button icon="iconfont iconshangchuanwenjian" type="primary" onClick="upLoader.click()"> 上传文件</el-button>
                <p style="color: rgba(0, 0, 0, 0.5)">支持扩展名：.rar .zip .doc .docx .pdf .jpg...</p>
                <input type="file" name="upLoader" id="upLoader" style="display: none" @change="filechange($event)" />
            </div>
            <div v-else><div v-if="value.length == 0" class="title">暂无附件</div></div>
        </div>
    </div>
</template>

<script lang="ts">
import { upload } from '@/common/util/ossUploadService';
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
@Component({})
export default class AttachmentPanel extends Vue {
    @Prop({ default: () => [] })
    value;
    @Prop({ default: true })
    upload;
    @Prop({ default: '' })
    title;
    mounted() {}
    async filechange(event) {
        let file = event.target.files[0];
        const res = await upload(file, file.name);
        if (res.res.statusCode == '200') {
            let url = res.res.requestUrls[0].split('?')[0];
            this.value.push({ path: url, name: file.name });
        } else {
            this.$message.warning('上传失败!');
        }
        $('#upLoader').val('');
    }
    downFile(url) {
        window.open(url, '_blank');
    }
    delFile(i) {
        this.value.splice(i, 1);
    }
}
</script>

<style lang="scss" scoped>
.fileContainer {
    display: flex;
    font-size: 14px;
}
.title {
    color: #000;
    padding-top: 8px;
}
.filelist {
    padding-left: 10px;
}
.filelist .item {
    display: flex;
    border-radius: 2px;
    width: 300px;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    margin-bottom: 10px;
    position: relative;
    cursor: pointer;
    i {
        line-height: 40px;
        margin-right: 10px;
    }
    p {
        width: 230px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 0;
    }
    .del {
        display: none;
        position: absolute;
        right: 10px;
        &:hover {
            color: $red;
        }
    }
    &:nth-child(odd) {
        background: rgba(0, 0, 0, 0.1);
    }
    &:nth-child(even) {
        background: rgba(0, 0, 0, 0.03);
    }
    &:hover .del {
        display: block;
    }
}
</style>
